<script setup>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import {ref,onMounted} from 'vue'
let firstThree = ref()

const scene = new THREE.Scene()

const group = new THREE.Group()
scene.add(group)

let t = ['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg',]
let box = new THREE.BoxGeometry(100,100,100)
const metaerial = []
t.forEach(t=>{
  metaerial.push(new THREE.MeshStandardMaterial({
    map:new THREE.TextureLoader().load(`./public/Park2/${t}`),
    side:THREE.DoubleSide
  }))
})

let mesh = new THREE.Mesh(box,metaerial)
mesh.position.set(0,0,0)
// 此时是在几何体内部看图，但是图是贴在几何体外面的，因此使用scale属性将贴图反过来
mesh.scale.set(1,1,-1)
group.add(mesh)

let sphere = new THREE.SphereGeometry(100)
// 在球体上加载全景图片
let loaders = new RGBELoader();
loaders.load('./public/1.hdr',(texture)=>{
  let Sphere_metaerial = new THREE.MeshStandardMaterial({
      map: texture,
      side:THREE.DoubleSide
    })
  let mesh1 = new THREE.Mesh(sphere,Sphere_metaerial)
  mesh.position.set(0,0,0)
  // group.add(mesh1)
})



// 环境光
const ambient = new THREE.AmbientLight("#fff",0.8)
scene.add(ambient)
// 平行光
// const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// directionalLight.position.set(100, 60, 50);
// scene.add(directionalLight);

const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(100,width/height,1,8000)
camera.position.set(0,40,-28)
camera.lookAt(10,5,0) 


// 解决渲染出来的图像有锯齿
const renderer = new THREE.WebGLRenderer({
  antialias:true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(width,height)

function render(){
  requestAnimationFrame(render)
  renderer.render(scene,camera)
}
render()

const controls = new OrbitControls(camera,renderer.domElement)
controls.target.set(0,0,0)
controls.addEventListener("change",function(){
  renderer.render(scene,camera)
})
onMounted(()=>{
  document.getElementById("firstThree").appendChild(renderer.domElement)
})

</script>

<template>
  <div>
    <div id="firstThree" ref="firstThree"></div>
  </div>
</template>

<style scoped>
  #firstThree{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }
</style>
